import React from 'react'
import logo from '@/assets/react.svg'
import { Button, Form, Input, Checkbox } from 'antd'
import { login } from '@/service/api'
import { HOME_URL } from '@/config/config'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import './index.scss'

const Login = () => {
  const navigate = useNavigate()
  const { t } = useTranslation()
  const onFinish = (values: any) => {
    login({
      username: values.username,
      password: values.password
    }).then(() => {
      navigate(HOME_URL)
    })
  }
  const onFinishFailed = (errInfo: any) => {
    console.log('Failed', errInfo)
  }
  const onReset = () => {
    console.log('重置')
  }
  return (
    <div className="login_container">
      <div className="login_box">
        <div className="logo_box">
          <img src={logo} alt="avatar" />
        </div>
        <div className="login_form">
          <Form
            name="basic"
            labelCol={{ span: 5 }}
            labelAlign="left"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label={t('login.username')}
              name="username"
              rules={[{ required: true, message: t('login.required_user') }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label={t('login.password')}
              name="password"
              rules={[{ required: true, message: t('login.required_pwd') }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
              <Checkbox>{t('login.remember')}</Checkbox>
            </Form.Item>
            <Form.Item>
              <div className="btns">
                <Button type="primary" htmlType="submit">
                  {t('login.submit')}
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  {t('login.reset')}
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default Login
